<template>
  <div class="data">
    <div class="data-title">
      <div class="header_name">厦门兴才学院智慧空调数据平台</div>
      <div class="fullscreen display_flex3 align-items bg-purple_num" @click="handlefullScreen">
        <i class="el-icon-rank"></i>{{ fullscreenName }}
      </div>
      <!-- <div class="title-left fl"></div>
      <div class="title-center fl"></div>
      <div class="title-right fr"></div> -->
    </div>
    <div class="data-content">
      <div class="con-left fl">
        <div class="left-top">
          <div class="top-bottom">
            <div class="info-title">
              <img src="../../assets/img/left@2x.png" class="left_right_icon" />
              <div class="titleName">更新时间</div>
              <img src="../../assets/img/right@2x.png" class="left_right_icon" />
            </div>
            <img src="../../assets/img/bj-1.png" alt="" class="bj-1" />
            <img src="../../assets/img/bj-2.png" alt="" class="bj-2" />
            <img src="../../assets/img/bj-3.png" alt="" class="bj-3" />
            <img src="../../assets/img/bj-4.png" alt="" class="bj-4" />
            <div
              class="
                                                                                                                                                                                                                  display_flex3
                                                                                                                                                                                                                  align-items
                                                                                                                                                                                                                  updataTime
                                                                                                                                                                                                                  justify-content-center
                                                                                                                                                                                                                ">
              <img src="../../assets/img/time.png" alt="" class="time_icon" />
              <div>{{ NowTime }}</div>
            </div>
            <!-- <div ref="registrations" class="charts"></div> -->
          </div>

          <div class="info" ref="areainfo">
            <div class="info-title">
              <img src="../../assets/img/left@2x.png" class="left_right_icon" />
              <div class="titleName">楼栋设备用电列表</div>
              <img src="../../assets/img/right@2x.png" class="left_right_icon" />
            </div>
            <img src="../../assets/img/bj-1.png" alt="" class="bj-1" />
            <img src="../../assets/img/bj-2.png" alt="" class="bj-2" />
            <img src="../../assets/img/bj-3.png" alt="" class="bj-3" />
            <img src="../../assets/img/bj-4.png" alt="" class="bj-4" />
            <div class="monitor panel1 panelbackImage2 realTimeAlarm" style="height: 90%">
              <div class="inner">
                <div class="content" style="display: block">
                  <div class="head">
                    <span class="col width4">楼栋</span>
                    <span class="col">用电耗能</span>
                    <span class="col width4">设备数量</span>
                  </div>
                  <div class="marquee-view">
                    <div :class="deviceList.length > 10 ? 'marquee' : ''">
                      <div v-for="(item, index) in deviceList" :key="index">
                        <div class="row">
                          <span class="col width4">{{ item.areaName }}</span>
                          <span class="col">{{ item.electricityRecord }}</span>
                          <span class="col width4">{{ item.deviceNum }}</span>
                          <span class="icon-dot"></span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- <div class="left-bottom">
          <img src="../../assets/img/bj-1.png" alt="" class="bj-1" />
          <img src="../../assets/img/bj-2.png" alt="" class="bj-2" />
          <img src="../../assets/img/bj-3.png" alt="" class="bj-3" />
          <img src="../../assets/img/bj-4.png" alt="" class="bj-4" />
          <div ref="registrationsUser" class="charts padding10"></div>
        </div> -->
      </div>

      <div class="con-center fl">
        <div class="cen-bottom fr">
          <div class="info-title">
            <img src="../../assets/img/left@2x.png" class="left_right_icon" />
            <div class="titleName">用电统计</div>
            <img src="../../assets/img/right@2x.png" class="left_right_icon" />
          </div>
          <div class="right-top">
            <img src="../../assets/img/bj-1.png" alt="" class="bj-1" />
            <img src="../../assets/img/bj-2.png" alt="" class="bj-2" />
            <img src="../../assets/img/bj-3.png" alt="" class="bj-3" />
            <img src="../../assets/img/bj-4.png" alt="" class="bj-4" />
          </div>
          <div class="display_flex3 align-items electro-all justify-content-center">
            <img src="../../assets/img/statistics_icon.png" alt="" class="time_icon" />
            <span class="electro-all-title">用电总量</span>
            <div>{{ electricitySum.electricitySumHistory }}</div>
          </div>
          <div class="display_flex3 electro-content align-items space-around">
            <div>
              <div class="electro-value electro-color">
                {{ electricitySum.electricitySumYesterday }}
              </div>
              <div class="electro-title">
                <img src="../../assets/img/past_icon.png" alt="" class="electro-icon" />
                昨日耗电量
              </div>
            </div>
            <div class="borderRight margintop5"></div>
            <div>
              <div class="electro-value electro-color1">
                {{ electricitySum.electricitySumToday }}
              </div>
              <div class="electro-title">
                <img src="../../assets/img/today_icon.png" alt="" class="electro-icon" />
                今日耗电量
              </div>
            </div>
          </div>
        </div>
        <div class="cen-bottom fr">
          <div class="info-title">
            <img src="../../assets/img/left@2x.png" class="left_right_icon" />
            <div class="titleName">设备运行状态</div>
            <img src="../../assets/img/right@2x.png" class="left_right_icon" />
          </div>
          <div class="right-top">
            <img src="../../assets/img/bj-1.png" alt="" class="bj-1" />
            <img src="../../assets/img/bj-2.png" alt="" class="bj-2" />
            <img src="../../assets/img/bj-3.png" alt="" class="bj-3" />
            <img src="../../assets/img/bj-4.png" alt="" class="bj-4" />
          </div>
          <div class="cen-top display_flex3 height70" ref="PieOffsetHeight">
            <div ref="devicePie" class="deviceType" style="height: 100%" @click="handledeviceRunState(0)"></div>
            <div ref="devicePie1" class="deviceType" style="height: 100%" @click="handledeviceRunState(2)"></div>
            <div ref="devicePie2" class="deviceType" style="height: 100%" @click="handledeviceRunState()"></div>
          </div>
        </div>
        <div class="cen-bottom fr">
          <div class="info-title">
            <img src="../../assets/img/left@2x.png" class="left_right_icon" />
            <div class="titleName">教室耗电排行Top10</div>
            <img src="../../assets/img/right@2x.png" class="left_right_icon" />
          </div>
          <div class="right-top">
            <img src="../../assets/img/bj-1.png" alt="" class="bj-1" />
            <img src="../../assets/img/bj-2.png" alt="" class="bj-2" />
            <img src="../../assets/img/bj-3.png" alt="" class="bj-3" />
            <img src="../../assets/img/bj-4.png" alt="" class="bj-4" />
          </div>
          <div class="cen-top height80">
            <div ref="powerRankings" class="deviceType" style="margin-top: 10px; width: 100%; height: 100%"></div>
          </div>
        </div>
      </div>

      <div class="con-right fr">
        <div class="right-top" ref="rightTop">
          <div class="info-title">
            <img src="../../assets/img/left@2x.png" class="left_right_icon" />
            <div class="titleName">月耗电量</div>
            <img src="../../assets/img/right@2x.png" class="left_right_icon" />
          </div>
          <img src="../../assets/img/bj-1.png" alt="" class="bj-1" />
          <img src="../../assets/img/bj-2.png" alt="" class="bj-2" />
          <img src="../../assets/img/bj-3.png" alt="" class="bj-3" />
          <img src="../../assets/img/bj-4.png" alt="" class="bj-4" />
          <div ref="month_power" class="charts" style="height: 70%"></div>
        </div>
        <div class="right-center">
          <div class="info-title">
            <img src="../../assets/img/left@2x.png" class="left_right_icon" />
            <div class="titleName">天耗电量</div>
            <img src="../../assets/img/right@2x.png" class="left_right_icon" />
          </div>
          <img src="../../assets/img/bj-1.png" alt="" class="bj-1" />
          <img src="../../assets/img/bj-2.png" alt="" class="bj-2" />
          <img src="../../assets/img/bj-3.png" alt="" class="bj-3" />
          <img src="../../assets/img/bj-4.png" alt="" class="bj-4" />
          <div ref="data_power" class="charts" style="height: 70%"></div>
        </div>
        <div class="right-bottom">
          <div class="info-title">
            <img src="../../assets/img/left@2x.png" class="left_right_icon" />
            <div class="titleName">小时耗电量</div>
            <img src="../../assets/img/right@2x.png" class="left_right_icon" />
          </div>
          <img src="../../assets/img/bj-1.png" alt="" class="bj-1" />
          <img src="../../assets/img/bj-2.png" alt="" class="bj-2" />
          <img src="../../assets/img/bj-3.png" alt="" class="bj-3" />
          <img src="../../assets/img/bj-4.png" alt="" class="bj-4" />
          <div ref="time_power" class="charts" style="height: 70%"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
import { mapState } from "vuex";
// import features from "../utils/province.json";
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import parsing from "../../assets/js/parsing";
import api from "../../api/api";
let features;
var devicePieOptions = {
  title: {
    text: "",
    subtext: "已断电设备数",
    x: "center",
    y: "top",
    top: 50,
    textStyle: {
      fontFamily: "微软雅黑",
      color: "#ffffff",
      fontSize: 24,
    },
    subtextStyle: {
      fontFamily: "微软雅黑",
      fontSize: 12,
      color: "#fff",
    },
  },
  grid: {
    x: "1%", //距离左边
    x2: "1%",
    y: "1%", // 上距离
    y2: "1%", // 下距离
    containLabel: true,
  },
  color: ["rgba(176, 212, 251, 1)"],

  series: [
    {
      name: "Line 1",
      type: "pie",
      clockWise: true,
      radius: ["55%", "70%"],
      itemStyle: {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
        },
      },
      hoverAnimation: false,
      data: [
        {
          value: 90,
          name: "01",
          itemStyle: {
            normal: {
              color: {
                // 完成的圆环的颜色
                colorStops: [
                  {
                    offset: 0,
                    color: "#858585", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#BBBBBB", // 100% 处的颜色
                  },
                ],
              },
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
        },
        {
          name: "02",
          value: 10,
          itemStyle: {
            normal: {
              color: "#023AAE",
            },
          },
        },
      ],
    },
    {
      name: "外边框",
      type: "pie",
      clockWise: false,
      radius: ["74%", "74%"], //边框大小
      center: ["50%", "50%"], //边框位置
      data: [
        {
          value: 10,
          itemStyle: {
            normal: {
              borderWidth: 2, //设置边框粗细
              borderColor: "#023AAE", //边框颜色
            },
          },
          labelLine: {
            show: false,
          },
        },
      ],
    },
  ],
};
var devicePieOptions1 = {
  grid: {
    x: "1%", //距离左边
    x2: "1%",
    y: "1%", // 上距离
    y2: "1%", // 下距离
    containLabel: true,
  },
  title: {
    text: "0个",
    subtext: "通电中设备数",
    x: "center",
    y: "top",
    top: 50,
    textStyle: {
      fontFamily: "微软雅黑",
      color: "#ffffff",
      fontSize: 24,
    },
    subtextStyle: {
      fontFamily: "微软雅黑",
      fontSize: 12,
      color: "#fff",
    },
  },
  color: ["rgba(176, 212, 251, 1)"],

  series: [
    {
      name: "Line 1",
      type: "pie",
      clockWise: true,
      radius: ["55%", "70%"],
      itemStyle: {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
        },
      },
      hoverAnimation: false,
      data: [
        {
          value: 0,
          name: "01",
          itemStyle: {
            normal: {
              color: {
                // 完成的圆环的颜色
                colorStops: [
                  {
                    offset: 0,
                    color: "#28BB61", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#007FC6", // 100% 处的颜色
                  },
                ],
              },
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
        },
        {
          name: "02",
          value: 10,
          itemStyle: {
            normal: {
              color: "#023AAE",
            },
          },
        },
      ],
    },
    {
      name: "外边框",
      type: "pie",
      clockWise: false,
      radius: ["74%", "74%"], //边框大小
      center: ["50%", "50%"], //边框位置
      data: [
        {
          value: 10,
          itemStyle: {
            normal: {
              borderWidth: 2, //设置边框粗细
              borderColor: "#023AAE", //边框颜色
            },
          },
          labelLine: {
            show: false,
          },
        },
      ],
    },
  ],
};
var devicePieOptions2 = {
  grid: {
    x: "1%", //距离左边
    x2: "1%",
    y: "1%", // 上距离
    y2: "1%", // 下距离
    containLabel: true,
  },
  title: {
    text: "0个",
    subtext: "运行空调数",
    x: "center",
    y: "top",
    top: 50,
    textStyle: {
      fontFamily: "微软雅黑",
      color: "#ffffff",
      fontSize: 24,
    },
    subtextStyle: {
      fontFamily: "微软雅黑",
      fontSize: 12,
      color: "#fff",
    },
  },
  color: ["rgba(176, 212, 251, 1)"],

  series: [
    {
      name: "Line 1",
      type: "pie",
      clockWise: true,
      radius: ["55%", "70%"],
      itemStyle: {
        normal: {
          label: {
            show: false,
          },
          labelLine: {
            show: false,
          },
        },
      },
      hoverAnimation: false,
      data: [
        {
          value: 90,
          name: "01",
          itemStyle: {
            normal: {
              color: {
                // 完成的圆环的颜色
                colorStops: [
                  {
                    offset: 0,
                    color: "#F3A261", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#977DF7", // 100% 处的颜色
                  },
                ],
              },
              label: {
                show: false,
              },
              labelLine: {
                show: false,
              },
            },
          },
        },
        {
          name: "02",
          value: 10,
          itemStyle: {
            normal: {
              color: "#023AAE",
            },
          },
        },
      ],
    },
    {
      name: "外边框",
      type: "pie",
      clockWise: false,
      radius: ["74%", "74%"], //边框大小
      center: ["50%", "50%"], //边框位置
      data: [
        {
          value: 10,
          itemStyle: {
            normal: {
              borderWidth: 2, //设置边框粗细
              borderColor: "#023AAE", //边框颜色
            },
          },
          labelLine: {
            show: false,
          },
        },
      ],
    },
  ],
};
var powerRankingsOption = {
  grid: {
    x: "3%", //距离左边
    x2: "5%",
    y: "5%", // 上距离
    y2: "10%", // 下距离
    containLabel: true,
  },
  title: {
    text: "",
    textStyle: {
      //文字颜色
      color: "#fff",
      //字体大小
      fontSize: 12,
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow",
    },
  },
  xAxis: {
    type: "category",
    boundaryGap: [0, 0.01],
    data: [],
    axisLine: {
      show: true,
      lineStyle: {
        color: "#fff",
      },
    },
  },
  formatter: function (params) {
    // console.log(params);
    var texts = "";
    texts +=
      "楼栋:" +
      params[0].name +
      "<br>" +
      "房间号:" +
      params[0].axisValue +
      "<br>" +
      "耗电:" +
      params[0].value;
    return texts;
  },
  yAxis: {
    type: "value",
    axisLabel: {
      //y轴文字的配置
      textStyle: {
        color: "#fff",
      },
    },
    splitLine: {
      //分割线配置
      show: true,
      lineStyle: {
        color: "#0053C0",
      },
    },
  },
  series: [
    {
      name: "",
      type: "bar",
      barWidth: 25,
      data: [100, 15, 40, 90, 40, 30],
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            1,
            0,
            0,
            [
              {
                offset: 0,
                color: "#E5C61C", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#E57B1C",
              },
            ],
            false
          ),
        },
      },
    },
  ],
  legend: {
    show: false,
    textStyle: {
      color: "#fff",
    },
  },
};

var month_powerOption = {
  grid: {
    x: "3%", //距离左边
    x2: "6%",
    y: "11%", // 上距离
    y2: "5%", // 下距离
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      crossStyle: {
        color: "#999",
      },
    },
  },

  xAxis: [
    {
      type: "category",
      data: [],
      axisPointer: {
        type: "shadow",
      },
      axisLabel: {
        // interval: 0,
        textStyle: {
          color: "#fff",
        },
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      name: "",
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        //分割线配置
        show: true,
        lineStyle: {
          color: "#0053C0",
        },
      },
    },
    {
      type: "",
      name: "",
      interval: 0,
      axisLabel: {},
    },
  ],
  series: [
    {
      name: "耗电量",
      type: "bar",
      barWidth: 10,
      tooltip: {
        valueFormatter: function (value) {
          return value;
        },
      },
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            1,
            0,
            0,
            [
              {
                offset: 0,
                color: "#006DFF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#21A4FF",
              },
            ],
            false
          ),
        },
      },
      data: [],
    },
    {
      name: "",
      type: "line",
      yAxisIndex: 1,
      itemStyle: {
        normal: {
          color: "#E5C61C",
        },
      },
      tooltip: {
        show: false,
        valueFormatter: function (value) {
          return value;
        },
      },
      data: [],
    },
  ],
};
var data_powerOption = {
  grid: {
    x: "3%", //距离左边
    x2: "6%",
    y: "11%", // 上距离
    y2: "5%", // 下距离
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      crossStyle: {
        color: "#999",
      },
    },
  },

  xAxis: [
    {
      type: "category",
      data: [],
      axisPointer: {
        type: "shadow",
      },
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      name: "",
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        //分割线配置
        show: true,
        lineStyle: {
          color: "#0053C0",
        },
      },
    },
  ],
  series: [
    {
      name: "耗电量",
      type: "bar",
      barWidth: 10,
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            1,
            0,
            0,
            [
              {
                offset: 0,
                color: "#0FB4F9", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#24C494",
              },
            ],
            false
          ),
        },
      },
      data: [],
    },
  ],
};
var time_powerOption = {
  grid: {
    x: "3%", //距离左边
    x2: "6%",
    y: "11%", // 上距离
    y2: "5%", // 下距离
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      crossStyle: {
        color: "#999",
      },
    },
  },

  xAxis: [
    {
      type: "category",
      boundaryGap: true,
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
    },
  ],
  yAxis: [
    {
      type: "value",
      axisLabel: {
        textStyle: {
          color: "#fff",
        },
      },
      splitLine: {
        //分割线配置
        show: true,
        lineStyle: {
          color: "#0053C0",
        },
      },
    },
  ],
  series: [
    {
      name: "耗电量",
      type: "line",
      stack: "Total",
      areaStyle: {},
      showSymbol: true, //是否默认展示圆点
      symbol: "circle", //设定为实心点
      symbolSize: 8, //设定实心点的大小
      itemStyle: {
        normal: {
          color: "#E5C61C",
        },
      },
      tooltip: {
        show: true,
        valueFormatter: function (value) {
          return value;
        },
      },
      data: [],
      itemStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            1,
            0,
            0,
            [
              {
                offset: 0,
                color: "#8b8b8b26", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#B2835B",
              },
            ],
            false
          ),
        },
      },
      emphasis: {
        focus: "series",
      },
      data: [120, 132, 101, 134, 90, 230, 210],
    },
  ],
};
export default {
  components: {},
  setup(prop, context) {
    let { proxy } = getCurrentInstance();
    const router = useRouter();
    const projectId = Number(localStorage.getItem("projectId"));
    const devicePie = ref(null);
    const devicePie1 = ref(null);
    const devicePie2 = ref(null);
    const powerRankings = ref(null);
    const month_power = ref(null);
    const time_power = ref(null);
    const data_power = ref(null);
    const seachValue = ref("");
    const PieOffsetHeight = ref(null);
    const NowTime = ref(parsing.getNowTime());
    const runStateTime = ref(null);
    setInterval(function () {
      NowTime.value = parsing.getNowTime();
    }, 1000);
    onMounted(() => {
      // 设备运行状态
      getDeviceRunState();
      runStateTime.value = setInterval(function () {
        getDeviceRunState();
      }, 300000);
      // 教室耗电排行Top10
      getClassElectriTop10();
      //按月
      // //月耗电统计
      getElectriMonthly();
      //  //天耗电统计
      getElectriDaily();
      //    // 小时耗电量、
      getElectriHourly();
    });
    onUnmounted(() => {
      clearInterval(runStateTime.value);
      runStateTime.value = null;
    });
    const getDeviceRunState = () => {
      api
        .getListAPI("backup/xingcaiIndexData/deviceRunState", {
          projectId: projectId,
        })
        .then((res) => {
          if (res.data.code == 1) {
            let barChart = echarts.init(devicePie.value);
            devicePieOptions.title.text = res.data.data.countPoweroff + "个";
            devicePieOptions.series[0].data[0].value =
              res.data.data.countPoweroff;
            if (PieOffsetHeight.value.offsetHeight > 190) {
              devicePieOptions.title.top = 80;
            } else {
              devicePieOptions.title.top = 45;
            }
            barChart.setOption(devicePieOptions);
            window.addEventListener("resize", function () {
              barChart.resize();
            });
            let barChart1 = echarts.init(devicePie1.value);
            devicePieOptions1.title.text = res.data.data.countPowerOn + "个";
            devicePieOptions1.series[0].data[0].value =
              res.data.data.countPowerOn;
            if (PieOffsetHeight.value.offsetHeight > 190) {
              devicePieOptions1.title.top = 80;
            } else {
              devicePieOptions1.title.top = 45;
            }
            barChart1.setOption(devicePieOptions1);
            window.addEventListener("resize", function () {
              barChart1.resize();
            });
            let barChart2 = echarts.init(devicePie2.value);
            devicePieOptions2.title.text = res.data.data.countRunning + "个";
            devicePieOptions2.series[0].data[0].value =
              res.data.data.countRunning;
            if (PieOffsetHeight.value.offsetHeight > 190) {
              devicePieOptions2.title.top = 80;
            } else {
              devicePieOptions2.title.top = 45;
            }
            barChart2.setOption(devicePieOptions2);
            window.addEventListener("resize", function () {
              barChart2.resize();
            });
          }
          //数据处理
        })
        .catch((err) => {
          console.log(err);
        });
    };
    const getClassElectriTop10 = () => {
      let yAxis = [];
      let xAxis = [];
      api
        .getListAPI("backup/xingcaiIndexData/classElectriTop10", {
          projectId: projectId,
        })
        .then((res) => {
          if (res.data.code == 1) {
            for (var i = 0; i < res.data.data.length; i++) {
              xAxis.push(res.data.data[i].roomNum);
              yAxis.push({
                value: res.data.data[i].electricityRecord,
                name: res.data.data[i].areaName,
              });
            }
            let barChartUser = echarts.init(powerRankings.value);
            console.log(xAxis);
            powerRankingsOption.series[0].data = yAxis;
            powerRankingsOption.xAxis.data = xAxis;
            barChartUser.setOption(powerRankingsOption);
            window.addEventListener("resize", function () {
              //自适应大小, 不用的话不会自适应大小。
              barChartUser.resize();
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };
    // 月
    const getElectriMonthly = () => {
      let yAxis = [];
      let xAxis = [];
      api
        .getListAPI("backup/xingcaiIndexData/electriMonthly", {
          projectId: projectId,
        })
        .then((res) => {
          if (res.data.code == 1) {
            for (var i = 0; i < res.data.data.length; i++) {
              xAxis.push(res.data.data[i].keyUnit + "月");
              yAxis.push(res.data.data[i].electricityRecord);
            }
            let month_powerChart = echarts.init(month_power.value);
            month_powerOption.series[0].data = yAxis;
            month_powerOption.series[1].data = yAxis;
            month_powerOption.xAxis[0].data = xAxis;
            month_powerChart.setOption(month_powerOption);
            window.addEventListener("resize", function () {
              //自适应大小, 不用的话不会自适应大小。
              month_powerChart.resize();
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };
    // 天
    const getElectriDaily = () => {
      let yAxis = [];
      let xAxis = [];
      api
        .getListAPI("backup/xingcaiIndexData/electriDaily", {
          projectId: projectId,
        })
        .then((res) => {
          if (res.data.code == 1) {
            for (var i = 0; i < res.data.data.length; i++) {
              xAxis.push(res.data.data[i].keyUnit);
              yAxis.push(res.data.data[i].electricityRecord);
            }
            let data_powerChart = echarts.init(data_power.value);
            data_powerOption.series[0].data = yAxis;
            data_powerOption.xAxis[0].data = xAxis;
            data_powerChart.setOption(data_powerOption);
            window.addEventListener("resize", function () {
              //自适应大小, 不用的话不会自适应大小。
              data_powerChart.resize();
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };
    // 小时
    const getElectriHourly = () => {
      let yAxis = [];
      let xAxis = [];
      api
        .getListAPI("backup/xingcaiIndexData/electriHourly", {
          projectId: projectId,
        })
        .then((res) => {
          if (res.data.code == 1) {
            for (var i = 0; i < res.data.data.length; i++) {
              xAxis.push(res.data.data[i].keyUnit + "时");
              yAxis.push(res.data.data[i].electricityRecord);
            }
            let time_powerChart = echarts.init(time_power.value);
            time_powerOption.series[0].data = yAxis;
            time_powerOption.xAxis[0].data = xAxis;
            time_powerChart.setOption(time_powerOption);
            window.addEventListener("resize", function () {
              //自适应大小, 不用的话不会自适应大小。
              time_powerChart.resize();
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    };
    const scrollbarRef = ref(null);
    const handleScrollLeft = () => {
      scrollbarRef.value.setScrollLeft();
    };
    const loadscroll = ref(false);
    const scrollList = ref([]);
    // 林地面积信息
    const scroll = ({ scrollTop }) => { };
    const locateAreaRank = ref([]);
    const alllocateAreaRank = ref(0);
    const deviceList = ref([]);
    const getdeviceAndElectricity = () => {
      api
        .getListAPI("backup/xingcaiIndexData/deviceAndElectricity", {
          projectId: projectId,
        })
        .then((res) => {
          if (res.data.code == 1) {
            deviceList.value = res.data.data;
          }
          //数据处理
        })
        .catch((err) => {
          console.log(err);
        });
    };
    getdeviceAndElectricity();
    const electricitySum = ref({});
    const getElectricitySum = () => {
      api
        .getListAPI("backup/xingcaiIndexData/electricitySum", {
          projectId: projectId,
        })
        .then((res) => {
          if (res.data.code == 1) {
            electricitySum.value = res.data.data;
          }
          //数据处理
        })
        .catch((err) => {
          console.log(err);
        });
    };
    getElectricitySum();
    const handleBulr = () => { };
    const elscrollbar = ref(null);
    const handleScrollbar = () => {
      elscrollbar.value.setScrollLeft(100);
    };
    const fullscreen = ref(context.attrs.fullscreen);
    // console.log(context.attrs.fullscreen);
    const fullscreenName = ref("全屏");
    // 是否包含左侧菜单
    const ismenu = ref(context.attrs.ismenu);
    let element = document.documentElement;
    if (!ismenu.value) {
      if (fullscreen.value) {
        fullscreenName.value = "全屏";
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        fullscreenName.value = "退出全屏";
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
    }
    const handlefullScreen = () => {
      fullscreen.value = !fullscreen.value;
      context.emit("handlefullScreen", fullscreen.value);
      if (!ismenu.value) {
        let element = document.documentElement;
        if (fullscreen.value) {
          fullscreenName.value = "全屏";
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        } else {
          fullscreenName.value = "退出全屏";
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen();
          }
        }
        fullscreen.value = !fullscreen.value;
      }
    };
    const handledeviceRunState = (index) => {
      proxy.$permissionList("AIRCONDITIONER_LIST_VIEW").then((res) => {
        if (res) {
          if (index) {
            router.push("./runStatus?deviceState=" + index);
          } else {
            router.push("./runStatus");
          }
        } else {
          ElMessage.error("暂无权限");
        }
      });
    };
    return {
      NowTime,
      devicePie,
      devicePie1,
      devicePie2,
      powerRankings,
      month_power,
      data_power,
      time_power,
      scrollbarRef,
      deviceList,
      electricitySum,
      scrollList,
      seachValue,
      loadscroll,
      locateAreaRank,
      alllocateAreaRank,
      elscrollbar,
      fullscreenName,
      PieOffsetHeight,
      handlefullScreen,
      handleBulr,
      handleScrollLeft,
      scroll,
      handleScrollbar,
      handledeviceRunState,
    };
  },
};
</script>
<style lang="less" scoped>
@import "../../assets/css/common1.css";
@import "../../assets/css/style.css";
@import "../../assets/css/home.less";
@import "../../assets/css/common.css";
@import "../../assets/fonts/iconfont.css";
@import "../../assets/css/map.css";

.seach_input {
  width: 90%;
  margin: 20px auto 0 auto;
  border: 1px solid #61ffff;
  border-radius: 4px;
}

&:deep(.el-input__inner) {
  background-color: #02223b;
  border: 0px;
}

&:deep(.el-carousel__mask) {
  width: auto;
}

.left_icon {
  width: 50px;
  position: fixed;
}

.bg-purple {
  height: 100%;
  overflow: hidden;
  position: relative;
  padding-left: 10px;
}

.home {
  margin-top: 20px;
  height: 32%;

  .swiper-box {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    width: auto;
    transition: all 0.2s;
  }
}

[class^="el-icon-arrow-"] {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px;
  padding: 10px 0;
  color: #999;
  // background-color: #999;
  cursor: pointer;
}

.el-icon-arrow-left {
  left: -7px;
}

.el-icon-arrow-right {
  right: -7px;
}

&:deep(.el-scrollbar) {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fullscreen {
  position: absolute;
  right: 30px;
  top: 25px;
  font-size: 16px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #bdf2fd;
  text-shadow: 0px 2px 2px rgba(0, 25, 110, 0.75);
}

.el-icon-rank {
  font-size: 30px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #bdf2fd;
  text-shadow: 0px 2px 2px rgba(0, 25, 110, 0.75);
  margin-right: 10px;
}

.icon-quanping {
  font-size: 38px;
  // box-shadow: 1px 1px 10px rgb(166 166 166);
  cursor: pointer;
}

.monitor .row {
  font-size: 0.8rem;
}

.deviceType {
  cursor: pointer;
}

.header_name {
  letter-spacing: 7px;
  font-size: 36px;
  left: 5px;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  color: #FFFFFF;
  // line-height: 106px;
  // text-shadow: 0px 4px 3px rgba(0, 25, 110, 0.75);
  background: linear-gradient(0deg, #0EB3FF 0%, #BBF0FD 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>
